Styled components extend component example

Todo List > Styled components extend component example

We've now extended the Button using the styled function in styled-components to wrap the Button in the creation of the IconButton. It will automatically apply all the styles in the Button component, and now we can override any we want. Sweet!

Your mission

Now the missions will get more advanced, so buckle up.

We want to show an Input html element when editing the task. This is so users can type in a new task name if they desire. To accomplish this, we'll want to add conditional logic inside our Task rendering to show either the TaskName, or a new component for the Input, which we'll call TaskInput.

In order to know whether to show either the input or the name, you'll want to write a new useState call to setup the editing state.

Let's get started. Go back to the Task component and add a click handler on the first IconButton to set the new state variable to true. When editing, instead of showing a TaskName, render a new component- a TaskInput.

Lesson 12/20

import styled from "styled-components";

const Button = styled.button`
  border: 0;
  padding: 4px; 
  font-size: 16px; 
  color: white; 
  cursor: pointer; 
  height: 28px;
  padding: 4px 20px; 
  box-shadow: 0px 0px 5px silver; 
  background-color: black;

  &:hover {
    background: gray; 
  }
`;

export const IconButton = styled(Button)`
  background: transparent;
  box-shadow: none; 

  &:hover {
    background: lightgray; 
  }
`;

export default Button;

Open Sandbox